<template>
	<view class="page">
		<view class="topBanner">
			<view class="banner-content">
				<view class="title">
					图片处理助手
				</view>
				<view class="subtitle">
					专业的图片处理工具集合
				</view>
			</view>
			<view class="banner-decoration">
				<view class="decoration-circle circle1"></view>
				<view class="decoration-circle circle2"></view>
				<view class="decoration-circle circle3"></view>
			</view>
		</view>
		<view class="tools-section">
			<view class="section-header">
				<text class="section-title">热门工具</text>
				<text class="section-subtitle">选择需要的功能开始处理</text>
			</view>
			
			<view class="featured-section">
				<view class="featured-card" @click="toWaterMark">
					<view class="featured-content">
						<view class="featured-icon">
							<image src="../../static/images/home/waterMark.svg" class="icon-large"></image>
						</view>
						<view class="featured-text">
							<text class="featured-title">加个水印</text>
							<text class="featured-desc">为图片添加个性水印</text>
						</view>
					</view>
					<view class="featured-btn">
						<text>立即使用</text>
					</view>
				</view>
				
				<view class="quick-tools">
					<view class="tool-card" @click="clipImg">
						<image src="../../static/images/home/clip.svg" class="tool-icon"></image>
						<view class="tool-info">
							<text class="tool-title">图片裁剪</text>
							<text class="tool-desc">智能裁剪处理</text>
						</view>
					</view>
					<view class="tool-card" @click="compressImg">
						<image src="../../static/images/home/compress.svg" class="tool-icon"></image>
						<view class="tool-info">
							<text class="tool-title">图片压缩</text>
							<text class="tool-desc">高效压缩减小</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="hot-tools-section">
				<view class="section-header">
					<text class="section-title">精选功能</text>
				</view>
				<view class="tools-grid">
					<view class="grid-item" @click="toFilers">
						<image src="../../static/images/home/filters.svg" class="grid-icon"></image>
						<text class="grid-title">添加滤镜</text>
						<text class="grid-desc">美化图片效果</text>
					</view>
					<view class="grid-item" @click="createPoster">
						<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
						<text class="grid-title">头像加字</text>
						<text class="grid-desc">头像文字装饰</text>
					</view>
					<view class="grid-item" @click="toWordCloud">
						<image src="../../static/images/common/settings.png" class="grid-icon"></image>
						<text class="grid-title">文字云生成</text>
						<text class="grid-desc">制作精美文字云</text>
						<view class="new-badge">新功能</view>
					</view>
					<view class="grid-item" @click="toMemeMaker">
						<image src="../../static/images/home/subtitle.svg" class="grid-icon"></image>
						<text class="grid-title">表情包制作</text>
						<text class="grid-desc">制作搞笑表情包</text>
					</view>
					<view class="grid-item" @click="toBeautyScore">
						<image src="../../static/images/common/settings.png" class="grid-icon"></image>
						<text class="grid-title">颜值打分器</text>
						<text class="grid-desc">AI颜值评测</text>
					</view>
					<view class="grid-item" @click="toGifMaker">
						<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
						<text class="grid-title">GIF制作</text>
						<text class="grid-desc">多图合成动图</text>
					</view>
				</view>
			</view>
			
			<view class="tabs-guide-section">
				<view class="guide-content">
					<text class="guide-title">更多功能</text>
					<text class="guide-subtitle">底部切换分类查看更多专业工具</text>
					<view class="tabs-preview">
						<view class="tab-item">
							<text class="tab-icon">⚙️</text>
							<text class="tab-name">基础处理</text>
						</view>
						<view class="tab-item">
							<text class="tab-icon">🎨</text>
							<text class="tab-name">创意设计</text>
						</view>
						<view class="tab-item">
							<text class="tab-icon">✨</text>
							<text class="tab-name">特色工具</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dotStyle: false,
				swiperList: [{
						url: '../../static/images/swiper/swiper1.jpg'
					},
					{
						url: '../../static/images/swiper/swiper2.jpg'
					}
				]
			}
		},
		methods: {
			clipImg() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					success: (res) => {
						console.log(res);
						uni.navigateTo({
							url: '/subPackages/imageTools/clipImg/clipImg?src=' + decodeURIComponent(res.tempFiles[0]
								.tempFilePath)
						});
					}
				});
			},
			compressImg() {
				uni.navigateTo({
					url: '/subPackages/imageTools/compressImg/compressImg'
				})
			},
			toWaterMark() {
				uni.navigateTo({
					url: '/subPackages/imageTools/waterMark/waterMark'
				});
			},
			createPoster() {
				uni.navigateTo({
					url: '/subPackages/imageTools/headPhoto/headPhoto'
				})
			},
			toFilers() {
				uni.navigateTo({
					url: '/subPackages/imageTools/filters/filters'
				})
			},
			toMarquee() {
				uni.navigateTo({
					url: '/subPackages/effects/marquee/marquee'
				})
			},
			toSizeClip() {
				uni.navigateTo({
					url: '/subPackages/imageTools/sizeClip/sizeClip'
				});
			},
			toGridCrop() {
				uni.navigateTo({
					url: '/subPackages/imageTools/gridCrop/gridCrop'
				});
			},
			toFormatConvert() {
				uni.navigateTo({
					url: '/subPackages/imageTools/formatConvert/formatConvert'
				});
			},
			toRotateFlip() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/rotateFlip/rotateFlip?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toLightAdjust() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/lightAdjust/lightAdjust?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toImageInfo() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/imageInfo/imageInfo?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toFrameDecoration() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/frameDecoration/frameDecoration?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toLongImageStitch() {
				uni.navigateTo({
					url: '/subPackages/imageTools/longImageStitch/longImageStitch'
				});
			},
			toMosaicTool() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/mosaicTool/mosaicTool?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toPhotoCollage() {
				uni.navigateTo({
					url: '/subPackages/imageTools/photoCollage/photoCollage'
				});
			},
			toMemeMaker() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/memeMaker/memeMaker?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toIdPhotoMaker() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/idPhotoMaker/idPhotoMaker?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toBatchCompress() {
				uni.navigateTo({
					url: '/subPackages/imageTools/batchCompress/batchCompress'
				});
			},
			toBatchWatermark() {
				uni.navigateTo({
					url: '/subPackages/imageTools/batchWatermark/batchWatermark'
				});
			},
			toBatchFormat() {
				uni.navigateTo({
					url: '/subPackages/imageTools/batchFormat/batchFormat'
				});
			},
			toHoroscopeGen() {
				uni.navigateTo({
					url: '/subPackages/imageTools/horoscopeGen/horoscopeGen'
				});
			},
			toBeautyScore() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/beautyScore/beautyScore?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toCountdownGen() {
				uni.navigateTo({
					url: '/subPackages/imageTools/countdownGen/countdownGen'
				});
			},
			toAchievementGen() {
				uni.navigateTo({
					url: '/subPackages/imageTools/achievementGen/achievementGen'
				});
			},
			toHolidayCard() {
				uni.navigateTo({
					url: '/subPackages/imageTools/holidayCard/holidayCard'
				});
			},
			toWordCloud() {
				uni.navigateTo({
					url: '/subPackages/imageTools/wordCloud/wordCloud'
				});
			},
			toColorTemperature() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/colorTemperature/colorTemperature?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toCircleCrop() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/circleCrop/circleCrop?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toGifMaker() {
				uni.navigateTo({
					url: '/subPackages/imageTools/gifMaker/gifMaker'
				});
			},
			toMoodDiary() {
				uni.navigateTo({
					url: '/subPackages/imageTools/moodDiary/moodDiary'
				});
			},
			toMotivationalPoster() {
				uni.navigateTo({
					url: '/subPackages/imageTools/motivationalPoster/motivationalPoster'
				});
			},
			toPetPhotoFrame() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/petPhotoFrame/petPhotoFrame?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toVintageFilm() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.navigateTo({
							url: '/subPackages/imageTools/vintageFilm/vintageFilm?src=' + encodeURIComponent(res.tempFiles[0].tempFilePath)
						});
					}
				});
			},
			toPersonalTagCloud() {
				uni.navigateTo({
					url: '/subPackages/imageTools/personalTagCloud/personalTagCloud'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		min-height: 100vh;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #f7f7f7;
		padding-bottom: 100rpx;
	}

	.topBanner {
		width: 100%;
		height: 300rpx;
		border-radius: 32rpx;
		overflow: hidden;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		position: relative;
		margin-bottom: 40rpx;
		
		.banner-content {
			position: absolute;
			top: 50%;
			left: 50rpx;
			transform: translateY(-50%);
			z-index: 2;
			
			.title {
				color: #fff;
				font-size: 52rpx;
				font-weight: 700;
				margin-bottom: 16rpx;
				text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
			}
			
			.subtitle {
				color: rgba(255,255,255,0.9);
				font-size: 28rpx;
				font-weight: 400;
				line-height: 1.4;
			}
		}
		
		.banner-decoration {
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			
			.decoration-circle {
				position: absolute;
				border-radius: 50%;
				background: rgba(255,255,255,0.1);
				
				&.circle1 {
					width: 200rpx;
					height: 200rpx;
					right: -50rpx;
					top: -50rpx;
				}
				
				&.circle2 {
					width: 120rpx;
					height: 120rpx;
					right: 100rpx;
					bottom: 20rpx;
					background: rgba(255,255,255,0.15);
				}
				
				&.circle3 {
					width: 80rpx;
					height: 80rpx;
					right: 50rpx;
					top: 50%;
					transform: translateY(-50%);
					background: rgba(255,255,255,0.08);
				}
			}
		}
	}

	.tools-section {
		flex: 1;
		
		.section-header {
			margin-bottom: 40rpx;
			
			.section-title {
				font-size: 48rpx;
				font-weight: 700;
				color: #333;
				display: block;
				margin-bottom: 12rpx;
			}
			
			.section-subtitle {
				font-size: 28rpx;
				color: #666;
				display: block;
			}
		}
		
		.featured-section {
			margin-bottom: 40rpx;
			
			.featured-card {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				border-radius: 24rpx;
				padding: 40rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.25);
				
				.featured-content {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					
					.featured-icon {
						margin-right: 30rpx;
						
						.icon-large {
							width: 80rpx;
							height: 80rpx;
						}
					}
					
					.featured-text {
						flex: 1;
						
						.featured-title {
							color: #fff;
							font-size: 40rpx;
							font-weight: 700;
							display: block;
							margin-bottom: 12rpx;
						}
						
						.featured-desc {
							color: rgba(255,255,255,0.8);
							font-size: 28rpx;
							display: block;
						}
					}
				}
				
				.featured-btn {
					background: rgba(255,255,255,0.2);
					border: 2rpx solid rgba(255,255,255,0.3);
					border-radius: 32rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					backdrop-filter: blur(10rpx);
					
					text {
						color: #fff;
						font-size: 32rpx;
						font-weight: 600;
					}
				}
			}
			
			.quick-tools {
				display: flex;
				gap: 20rpx;
				
				.tool-card {
					flex: 1;
					background: #fff;
					border-radius: 20rpx;
					padding: 30rpx 20rpx;
					box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					
					.tool-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 20rpx;
					}
					
					.tool-info {
						.tool-title {
							color: #333;
							font-size: 28rpx;
							font-weight: 600;
							display: block;
							margin-bottom: 8rpx;
						}
						
						.tool-desc {
							color: #666;
							font-size: 24rpx;
							display: block;
						}
					}
				}
			}
		}
		
		.hot-tools-section {
			margin-top: 60rpx;
			
			.tools-grid {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20rpx;
				
				.grid-item {
					background: #fff;
					border-radius: 20rpx;
					padding: 40rpx 30rpx;
					box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					transition: all 0.3s ease;
					position: relative;
					
					&:active {
						transform: scale(0.95);
						box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
					}
					
					.grid-icon {
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 24rpx;
						opacity: 0.8;
					}
					
					.grid-title {
						color: #333;
						font-size: 30rpx;
						font-weight: 600;
						display: block;
						margin-bottom: 12rpx;
					}
					
					.grid-desc {
						color: #666;
						font-size: 24rpx;
						display: block;
						line-height: 1.4;
					}
					
					.new-badge {
						position: absolute;
						top: 15rpx;
						right: 15rpx;
						background: linear-gradient(45deg, #ff6b6b, #feca57);
						color: white;
						font-size: 20rpx;
						padding: 8rpx 16rpx;
						border-radius: 20rpx;
						box-shadow: 0 3rpx 10rpx rgba(255, 107, 107, 0.3);
						font-weight: 500;
					}
				}
			}
		}
		
		.tabs-guide-section {
			margin-top: 60rpx;
			padding: 40rpx 30rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 25rpx;
			box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.3);
			margin-bottom: 120rpx;
			
			.guide-content {
				text-align: center;
				color: white;
				
				.guide-title {
					font-size: 36rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 16rpx;
				}
				
				.guide-subtitle {
					font-size: 26rpx;
					display: block;
					opacity: 0.9;
					margin-bottom: 40rpx;
				}
				
				.tabs-preview {
					display: flex;
					justify-content: space-around;
					
					.tab-item {
						text-align: center;
						
						.tab-icon {
							font-size: 40rpx;
							display: block;
							margin-bottom: 16rpx;
						}
						
						.tab-name {
							font-size: 24rpx;
							display: block;
							opacity: 0.9;
						}
					}
				}
			}
		}
	}
</style>